<template>
    <div id="todoList">
  <mu-appbar title="货车兄弟">
        </mu-appbar>

        <input  v-model="newItem" @keyup.enter="addNewItem">
        <h1 v-text="title"></h1>
         <ul>
             <li v-for=' item in items' v-bind:class="{finished: item.isFinish}" v-on:click="ItemClick(item)">{{item.label}}</li>
         </ul>
    </div>
</template>


<style>
    .finished {
        text-decoration :underline;
    }
.mu-appbar{
    margin-bottom:2rem;
  }
</style>


<script>
import Store from '../store.js'
export default {
  name: 'todoList',
  data () {
    return {
      title: 'todo List project',
      newItem: '',
      items: Store.fetch()
    }
  },
  methods: {
    ItemClick: function (item) {
      console.log(item.isFinish = !item.isFinish)
    },
    addNewItem: function () {
      console.log(this.newItem)
      this.items.push({
        label: this.newItem,
        isFinish: false
      })
      this.newItem = ''
    }
  },
  watch: {
    items: {
      handler: function (items) {
        console.log(items)
        Store.save(items)
      },
      deep: true
    }

  }
}
</script>